import { message, Tooltip } from "antd";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./toolGraffiti.module.less";
import { TooltipProps } from "antd/lib/tooltip";
import editorStore from "@/editorComponent/editorStore";
import designEditor from "@/editorComponent/designEditor";
import clsx from "clsx";
import userDesignService from "@/api/services/userDesignService";
import utils from "@/utils/utils";

// 涂鸦按钮
export default function ToolGraffiti() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [hover, setHover] = useState(false);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock, graffiti } = editorStore;
    setDisable(lock);

    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "image") {
      setVisible(true);
    } else {
      setVisible(false);
    }
    setHover(graffiti);
  }), []);

  // 打开涂鸦功能
  const openGraffiti = async () => {
    const { graffiti } = editorStore;

    if (!graffiti && !utils.isDev) {
      const canUse = await editorStore.updateAiUseCount("tuYa").catch(() => false);
      if (!canUse) {
        message.error('涂鸦次数已达上限');
        return;
      }
    }
    editorStore.setGraffiti(!graffiti);

  }

  return (
    <div
      ref={dom}
      className={clsx(styles.toolGraffiti, visible && styles.visible, disable && styles.disable, hover && styles.hover)}
      onClick={openGraffiti}
    >
      涂鸦
    </div>
  );

}
